<%--
  Created by IntelliJ IDEA.
  User: Hero
  Date: 2022/12/24
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上传音乐</title>
    <!-- Description, Keywords and Author -->
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your,Keywords">
    <meta name="author" content="HimanshuGupta">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Styles -->
    <!-- Bootstrap CSS -->
    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    <!-- Animate CSS -->
    <link href="${ctx}/css/animate.min.css" rel="stylesheet">
    <!-- Basic stylesheet -->
    <link rel="stylesheet" href="${ctx}/css/owl.carousel.css">
    <!-- Font awesome CSS -->
    <link href="${ctx}/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="${ctx}/css/style.css" rel="stylesheet">
    <link href="${ctx}/css/style-color.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="${ctx}/img/logo/favicon.ico">
</head>

<body>
<!-- modal for booking ticket form -->
<div class="modal fade" id="bookTicket" tabindex="-1" role="dialog" aria-labelledby="BookTicket">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button typelose><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Name of The Event &nbsp; <small><"button" class="close" data-dismiss="modal" aria-label="Cspan class="label label-success">Available</span> &nbsp; <span class="label label-danger">Not Available</span></small></h4>
            </div>
            <!-- form for events ticket booking -->
            <form>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="242039825@qq.com">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputContact">Contact</label>
                        <input type="text" class="form-control" id="exampleInputContact" placeholder="19871752473">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputSeats">Number of Tickets</label>
                        <select class="form-control" id="exampleInputSeats">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> I accept the Terms of Service
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!-- link to payment gatway here -->
                    <button type="button" class="btn btn-primary">Book Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- wrapper -->
<div class="wrapper" id="home">

    <!-- header area -->
    <header>
        <!-- secondary menu -->
        <nav class="secondary-menu">
            <div class="container">
                <!-- secondary menu left link area -->
                <div class="sm-left">
                    <strong>Phone</strong>:&nbsp; <a href="#">19871752473</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>E-mail</strong>:&nbsp; <a href="#">242039825@qq.com</a>
                </div>
                <!-- secondary menu right link area -->
                <div class="sm-right">
                    <!-- social link -->
                    <div class="sm-social-link">
                        <a class="h-facebook" href="#"><i class="fa fa-facebook"></i></a>
                        <a class="h-twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a class="h-google" href="#"><i class="fa fa-google-plus"></i></a>
                        <a class="h-linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </nav>
        <!-- primary menu -->
        <nav class="navbar navbar-fixed-top navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo area -->
                    <a class="navbar-brand" href="${pageContext.request.contextPath}/user/hope">
                        <!-- logo image -->
                        <img class="img-responsive" src="${ctx}/img/logo/logo.png" alt="" />
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="${pageContext.request.contextPath}/user/latestalbum">最新专辑</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/featuredalbum">特色专辑</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/joinus">加入我们</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/portfolio">上传音乐</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/team">团队</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/contact">联系</a></li>
                        <li class="li2"><a href="${pageContext.request.contextPath}/user/admin"><%=session.getAttribute("userName")%></a></li>
                        <li><a href="${pageContext.request.contextPath}/user/index">退出登录</a> </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <!--/ header end -->

    <!--/ portfolio  -->
    <div class="featured pad" id="portfolio">
        <div class="container">
            <!-- default heading -->
            <div class="default-heading">
                <!-- heading -->
                <h2>上传音乐</h2>
            </div>
        </div>
        <!-- portfolio -->
        <div class="portfolio-content" id="portfolioOwl">
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/portfolio/1.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>专辑标题</h3><hr>
                    <!-- project details -->
                    <p>关于专辑的一些细节。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/featured/1.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>卡西莫多的礼物</h3><hr>
                    <!-- project details -->
                    <p>专辑《卡西莫多的礼物》中收录的歌曲有《枕边故事》、《不朽》、《烟火里的尘埃》、《卡西莫多的礼物》、《我们都是孤独的》、《环游》、《拆弹专家》、《Let You Go》、《Why nobody fights》、《微光》。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/featured/2.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>异类</h3><hr>
                    <!-- project details -->
                    <p>专辑《异类》中收录的歌曲有《我管你》、《国王与乞丐》、《异类》、《反义词》、《蜉蝣》、《地球之盐》、《写给未来的孩子》、《逃离乌托邦》、《世界是一个动物园》、《变相怪杰》、《忧伤的巨人》。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/featured/3.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>H</h3><hr>
                    <!-- project details -->
                    <p>专辑《H》中收录的歌曲有《巨鹿》、《造物者》、《Here We Are》、《To Be Free》、《For Forever》、《消失的昨天》、《我离孤单几公里》、《我的滑板鞋2016》。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/featured/4.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>新世界NEW WORLD</h3><hr>
                    <!-- project details -->
                    <p>专辑《新世界NEW WORLD》中收录的歌曲有《斗牛》、《好想爱这个世界啊》、《疯人院》、《与火星孩子的对话》、《七重人格》、《神树》、《降临》、《新世界》。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
            <div class="item">
                <!-- item image -->
                <img class="img-responsive" src="${ctx}/img/featured/5.jpg" alt="">
                <!-- transparent background -->
                <div class="p-transparent"></div>
                <!-- on mouse hover details -->
                <div class="p-hover">
                    <!-- heading /title -->
                    <h3>希忘HOPE</h3><hr>
                    <!-- project details -->
                    <p>专辑《希忘Hope》中收录的歌曲有《飞行模式》、《小镇里的花》、《黑白艺术家》、《好想我回来呀》、《花落时相遇》、《走！一起去看日出吧》、《向阳而生》、《点燃银河尽头的篝火》、《当全世界忘了我》。</p>
                    <!-- icon -->
                    <a href="#"><i class="fa fa-share"></i></a>
                </div>
            </div>
        </div>
        <!-- portfolio end -->
    </div>
    <!-- footer -->
    <footer>
        <div class="container">
            <!-- social media links -->
            <div class="social">
                <a class="h-facebook" href="#"><i class="fa fa-facebook"></i></a>
                <a class="h-google" href="#"><i class="fa fa-google-plus"></i></a>
                <a class="h-linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                <a class="h-twitter" href="#"><i class="fa fa-twitter"></i></a>
            </div>
            <!-- copy right -->
            <p class="copy-right">&copy; copyright 2018, All rights are reserved.</p>
        </div>
    </footer>
    <!-- Javascript files -->
    <!-- jQuery -->
    <script src="${ctx}/js/jquery.js"></script>
    <!-- Bootstrap JS -->
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <!-- WayPoints JS -->
    <script src="${ctx}/js/waypoints.min.js"></script>
    <!-- Include js plugin -->
    <script src="${ctx}/js/owl.carousel.min.js"></script>
    <!-- One Page Nav -->
    <script src="${ctx}/js/jquery.nav.js"></script>
    <!-- Respond JS for IE8 -->
    <script src="${ctx}/js/respond.min.js"></script>
    <!-- HTML5 Support for IE -->
    <script src="${ctx}/js/html5shiv.js"></script>
    <!-- Custom JS -->
    <script src="${ctx}/js/custom.js"></script>
</body>
</html>
